@use '_utils';
@use '_values/colors';

.container {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 10px;

	&.row-item {
		padding: 15px 0;

		& + & {
			border-top: 1px solid colors.$gray-45;
		}
	}
}

.coin-balance-btn {
	cursor: pointer;
}

.coin-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	color: colors.$white;
	background-color: colors.$gray-75;
	flex-shrink: 0;

	&.sui {
		background-color: colors.$sui-blue;
	}
}

.coin-name-container {
	display: flex;
	flex-flow: column nowrap;
	gap: 6px;
	flex: 1;
	overflow: hidden;
}

.coin-name {
	color: colors.$gray-90;
	text-transform: capitalize;

	@include utils.typography('Primary/Body-SB');
	@include utils.overflow-ellipsis;
}

.coin-symbol {
	color: colors.$gray-65;
	text-transform: uppercase;

	@include utils.typography('Primary/BodySmall-M');
	@include utils.overflow-ellipsis;
}

.value-container {
	display: flex;
	flex-flow: row nowrap;
	flex: 1;
	overflow: hidden;

	&.row-item {
		flex: 1;
		justify-content: flex-end;
	}

	&.standalone {
		align-items: baseline;
	}
}

.value {
	&.standalone {
		color: colors.$gray-100;

		@include utils.typography('Primary/Heading1-B');
	}

	&.row-item {
		flex-shrink: 0;

		@include utils.overflow-ellipsis;
	}
}

.symbol {
	&.standalone {
		margin-left: 6px;
		color: colors.$gray-65;

		@include utils.typography('Primary/Heading3-M');
	}

	&.row-item {
		flex-shrink: 1;

		@include utils.overflow-ellipsis;
	}
}

.value,
.symbol {
	white-space: nowrap;

	&.row-item {
		color: colors.$gray-90;
		margin-right: 4px;

		@include utils.typography('Primary/Body-M');
	}
}
